<template>
  <div class="nav-bar">
    <div class="left-icon">
    <div class="icon">
      <img src="https://cdnjs.cloudflare.com/ajax/libs/twemoji/11.3.0/2/svg/1f469-200d-1f692.svg" alt="">
    </div>
    <h1 class="app-name">{{msg}}</h1>
    </div>
    <div class="nav-center">
      <router-link
      class="router-item" 
      :style="activeLink.includes(item.value)&&{background:item.bg}"
      v-for="item in linkItems" :to="`/app/${item.value}`" :key="item.value">
        <div :style="{color: activeLink.includes(item.value)?item.color:'var(--color-gray-700)'}">
          <Icon :type="item.value"></Icon>
        </div>
        <span class="nav-title">
          {{ item.label }}
        </span>
        <div class="bottom-line" :style="activeLink.includes(item.value) ? { background: item.borderColor } : {}"></div>
      </router-link>
    </div>
    <div class="right-button">
      <button :class="{activeButton:useDebug.debug}" @click="useDebug.toggle">
        <Bug />
        开发模式:({{useDebug.debug?"开":"关"}})
      </button>
      <button @click="showJson">
        <Share />发布
      </button>
    </div>
</div>
</template>

<script setup lang="ts">
import { Bug,Data, LayoutThree, Lightning, Share} from '@icon-park/vue-next';
import { storeToRefs } from 'pinia';
import { computed,defineComponent,h,toRaw } from 'vue';
import {useRoute} from 'vue-router';

import {useDebugStore} from '@/stores/debug'
import {useEditorStore} from '@/stores/editor'

const linkItems=[
  {
    value: 'dataSource',
    label: '数据源',  
    // 50% 50%代表渐变的形状是一个圆形，50%，100%代表的圆心的位置（容器的水平中心（50%）和垂直底部（100%）），以矩形的左上角为坐标零点，第一个颜色0%代表渐变的起点（圆心），到100%-渐变边缘
    bg: `radial-gradient(50% 50% at 50% 100%, rgba(0, 196, 83, 0.2) 0%, rgba(0, 196, 83, 0) 100%)`,
    color: 'rgb(0, 196, 83)',
    borderColor: 'radial-gradient(50% 50%, rgb(0, 196, 83) 0%, rgba(0, 196, 83, 0) 100%)'
  },
  {
    value: 'layout',
    label: '布局',
    bg: `radial-gradient(50% 50% at 50% 100%, rgba(24, 190, 212, 0.2) 0%, rgba(24, 190, 212, 0) 100%)`,
    color: 'rgb(24, 190, 212)',
    borderColor: 'radial-gradient(50% 50%, rgb(24, 190, 212) 0%, rgba(24, 190, 212, 0) 100%)'
  },
  {
    value: 'actions',
    label: '动作',
    bg: `radial-gradient(50% 50% at 50% 100%, rgba(241, 60, 11, 0.2) 0%, rgba(241, 60, 11, 0) 100%)`,
    color: 'rgb(241, 60, 11)',
    borderColor: 'radial-gradient(50% 50%, rgb(241, 60, 11) 0%, rgba(241, 60, 11, 0) 100%)'
  }
]

const editorStore=useEditorStore()
const {blocks}=storeToRefs(editorStore)
const showJson=()=>{
  alert(JSON.stringify(toRaw(blocks)))
}

const route=useRoute()

const activeLink=computed(()=>route.path)

const useDebug=useDebugStore()

const Icon=defineComponent({
  setup(props){
    switch(props.type){
      case "dataSource":
        return ()=>h(Data,{size:16})
      case "layout":
        return ()=>h(LayoutThree,{size:16})
      case "actions":
        return ()=>h(Lightning,{size:16})    
      default:
        return ()=>h('div')  
      }
  },
  props:{
    type:{
      type:String,
      required:true
    }
  }
});


defineProps<{
  msg:String
}>()
</script>

<style scoped>
.nav-bar{
  height: 48px;
  /* border-bottom: 1px solid #ccc; */
  box-shadow: rgb(0 0 0 / 8%) 0 1px 0;
  display: flex;
}
.left-icon{
  display: flex;
  align-items: center;
  width: 1000px;
  /* background-color: skyblue; */
}
.right-button{
  width: 1000px;
  /* background-color: pink; */
}
.icon{
  width: 32px;
  height: 32px;
  background-color: var(--color-primary);
  border-radius: 8px;
  margin: 0 8px 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
h1{
  font-weight: bold;
}
.app-name{
  color: var(--color-gray-900);
  font-weight: var(--font-weight-bolder);
  font-size: var(--font-size-large);
}
.icon img{
  width: 100%;
  height: 100%;
  padding: 6px;
}
.nav-center{
 display: flex;
 justify-content: center;
 flex-shrink:0;  /* 控制项目在空间不足时候缩小比例，如果为3,则每个缩小为原始的1/3 */
 align-items: center;
}
.router-item{
/* border: 1px solid #ccc; */
  font-size:14px;
  margin: 0 20px;
  padding: 10px;
  text-decoration: none;
  color: var(--color-text);
  display:flex;
  align-items: center;
  align-self: stretch; 
  position: relative;
}
.nav-title{
  margin-left: 10px;
  /* vertical-align:baseline; */
}
.bottom-line{
  position: absolute;
  bottom: -1px;
  height:1px;
  left:0;
  right:0;
  /* background: var(--color-primary); */
}
.right-button{
  display: flex;
  justify-content: flex-end;
  padding:8px 10px;
}
.right-button button{
  font-size: 14px;
  margin-right: 10px;
  padding: 0px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-black);
  background-color: var(--color-white);
  border: none;
  border-radius: 10px;
  box-shadow: var(--color-gray-300) 0 0 0 1px;
  cursor: pointer;
  font-weight: var(--font-weight-bold)
}
.right-button button:last-child{
  background-color: var(--color-black);
  color: var(--color-white);
}
button.activeButton{
  box-shadow: var(--color-primary) 0 0 0 1px;
  color: var(--color-primary);
}
</style>